<template>
    <div>
        <div class="tabBar">
            <NavTabs :tabs="tabs" :onChange="onChange"></NavTabs>
        </div>
        <ConvenienceOrderList :list="orders"></ConvenienceOrderList>
    </div>
</template>

<script setup lang="ts">
import NavTabs from '@/components/nav-tabs/index.vue'
import ConvenienceOrderList from '@/activityPages/components/convenience-order-list.vue'
import { ref } from 'vue'
const tabs = [
    { id: 0, name: '全部' },
    { id: 1, name: '支出' },
    { id: 2, name: '退款' }
]
function onChange(item) {
    console.log('my 便利 tab onChange', item)
}
const orders = ref([
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: -999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    },
    {
        number: '12313',
        storeName: '红旗',
        time: '2023-02-02',
        amount: 999
    }
])
</script>

<style scoped lang="scss">
.tabBar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
    z-index: 99;
    background-color: white;
}
</style>